<template>
  <div id="centerTop">
    <Echart
        :options="options"
        :id="id"
    ></Echart>
  </div>

</template>

<script>
import Echart from '@/common/echart'

var qualityTrends = {
  "20210203": {
    "submitTime": "2021-02-03T01:24:58Z",
    "funtionRatio": 1,
    "funtionOk": 0.5,
    "pass": 0,
    "execute": 0,
    "bugClose": 0.0707070707070707,
    "bugAge": 25,
    "bugRenew": 0,
    "bugReopen": 0,
    "bugTrend": 0,
    "passL0": 0,
    "qualitty": -0.06085858585858586
  },
  "20210206": {
    "submitTime": "2021-02-06T01:30:35Z",
    "funtionRatio": 1,
    "funtionOk": 0.6,
    "pass": 0,
    "execute": 0,
    "bugClose": 0.2,
    "bugAge": 25,
    "bugRenew": 0,
    "bugReopen": 0,
    "bugTrend": 0.6915717710993331,
    "passL0": 0,
    "qualitty": 0.04915717710993332
  },
  "20210207": {
    "submitTime": "2021-02-07T01:31:31Z",
    "funtionRatio": 1,
    "funtionOk": 0.8,
    "pass": 0.7890818858560794,
    "execute": 0.7209302325581395,
    "bugClose": 0.16875,
    "bugAge": 19,
    "bugRenew": 0,
    "bugReopen": 0,
    "bugTrend": -0.8126844581362413,
    "passL0": 0.7590361445783133,
    "qualitty": 0.3247440892362644
  },
  "20210301": {
    "submitTime": "2021-03-01T01:32:08Z",
    "funtionRatio": 1,
    "funtionOk": 0.8,
    "pass": 0.7884615384615384,
    "execute": 0.9069767441860465,
    "bugClose": 0.3225806451612903,
    "bugAge": 22,
    "bugRenew": 0,
    "bugReopen": 0,
    "bugTrend": 0.6051369134225069,
    "passL0": 0.7904761904761904,
    "qualitty": 0.49209196365758223
  },
  "20210308": {
    "submitTime": "2021-03-08T01:32:55Z",
    "funtionRatio": 1,
    "funtionOk": 0.9,
    "pass": 0.75,
    "execute": 0.9713774597495528,
    "bugClose": 0.44,
    "bugAge": 17,
    "bugRenew": 0,
    "bugReopen": 0,
    "bugTrend": 0.8545345215072574,
    "passL0": 0.7830188679245284,
    "qualitty": 0.6046949717105867
  },
  "20210316": {
    "submitTime": "2021-03-16T01:33:44Z",
    "funtionRatio": 1,
    "funtionOk": 0.95,
    "pass": 1,
    "execute": 0.9731663685152058,
    "bugClose": 0.49261083743842365,
    "bugAge": 14,
    "bugRenew": 0,
    "bugReopen": 0,
    "bugTrend": 0.8178939962885025,
    "passL0": 0.7830188679245284,
    "qualitty": 0.6867319775529612
  },
  "20210318": {
    "submitTime": "2021-03-18T01:34:16Z",
    "funtionRatio": 1,
    "funtionOk": 1,
    "pass": 0.7867647058823529,
    "execute": 0.9731663685152058,
    "bugClose": 0.526829268292683,
    "bugAge": 13,
    "bugRenew": 0,
    "bugReopen": 1,
    "bugTrend": 0.8440417392452615,
    "passL0": 0.7830188679245284,
    "qualitty": 0.661705143901842
  },
  "20210319": {
    "submitTime": "2021-03-19T01:34:51Z",
    "funtionRatio": 1,
    "funtionOk": 1,
    "pass": 0.7867647058823529,
    "execute": 0.9731663685152058,
    "bugClose": 0.5248868778280543,
    "bugAge": 10,
    "bugRenew": 3,
    "bugReopen": 0,
    "bugTrend": 0.788604377360348,
    "passL0": 0.7830188679245284,
    "qualitty": 0.6457729296204249
  },
  "20210326": {
    "submitTime": "2021-03-26T05:56:23Z",
    "funtionRatio": 1,
    "funtionOk": 1,
    "pass": 0.7867647058823529,
    "execute": 0.9731663685152058,
    "bugClose": 0.5921052631578947,
    "bugAge": 8,
    "bugRenew": 2,
    "bugReopen": 0,
    "bugTrend": 0.8607910254538721,
    "passL0": 0.7830188679245284,
    "qualitty": 0.7064352714957456
  }
}
export default {
  name: "centerTop",
  data() {
    return {
      options: {
        title: {
          text: '质量指数图'
        },
        xAxis: {
          type: 'category',
          data: this.getVersions()
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.getQuality(),
          type: 'line',
          smooth: true
        }]
      }
    }
  },
  // return {
  //   options: {
  //     title: {
  //       text: '堆叠区域图'
  //     },
  //     tooltip: {
  //       trigger: 'axis',
  //       axisPointer: {
  //         type: 'cross',
  //         label: {
  //           backgroundColor: '#6a7985'
  //         }
  //       }
  //     },
  //     legend: {
  //       data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
  //     },
  //     toolbox: {
  //       feature: {
  //         saveAsImage: {}
  //       }
  //     },
  //     grid: {
  //       left: '3%',
  //       right: '4%',
  //       bottom: '3%',
  //       containLabel: true
  //     },
  //     xAxis: [
  //       {
  //         type: 'category',
  //         boundaryGap: false,
  //         data: this.getVersions()
  //       }
  //     ],
  //     yAxis: [
  //       {
  //         type: 'value'
  //       }
  //     ],
  //     series: [
  //
  //       {
  //         name: '搜索引擎',
  //         type: 'line',
  //         symbol: 'circle',//拐点设置为实心
  //         symbolSize: 8,//拐点大小
  //         stack: '总量',
  //         animation: true,//false: hover圆点不缩放 .true:hover圆点默认缩放
  //         lineStyle: {
  //           normal: {
  //             color: 'blue',//折线的颜色
  //             width: '2'//折线粗细
  //           }
  //         },
  //         itemStyle: {
  //           normal: {
  //             color: 'blue',//拐点颜色
  //             borderColor: '#000000',//拐点边框颜色
  //             borderWidth: 3//拐点边框大小
  //           },
  //           emphasis: {
  //             color: '#000000'//hover拐点颜色定义
  //           }
  //         },
  //         areaStyle: {
  //           normal: {
  //             color: '#999999'//折线下面区块的颜色
  //           }
  //         },
  //         data: this.getQuality()
  //       }
  //     ]
  //   },
  // }

  methods: {
    getVersions() {
      var versions = []
      for (var v in qualityTrends) {
        versions.push(v)
      }
      return versions
    },
    getQuality() {
      var qualities = []
      for (var v in qualityTrends) {

        qualities.push(qualityTrends[v].qualitty)
      }

      return qualities
    }
  },
  components: {
    Echart,
  },
  mounted() {
    // this.getVersions()
    // this.getQuality()
  }
}
</script>

<style scoped>

</style>